<template>
	<view>
		<view class="stickyClass">
			<v-tabhead :headItems="headItems" @barTap="tabChange" :activeIndex="activeIndex"></v-tabhead>
		</view>
		<view v-show="activeIndex==0" class="index-container">
			<study ref="study" ></study>
		</view>
		<view v-show="activeIndex==1" class="index-container">
			<course ref="course"  :shouldLoad="activeIndex==1"></course>
		</view>
		<!-- <swiper :current="activeIndex" class="homeSwiperContainer">
			<swiper-item class="homeSwiperContainer">
				<study ref="study"></study>
			</swiper-item>
			<swiper-item class="homeSwiperContainer">
				<course ref="course" :shouldLoad="activeIndex==1"></course>
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	import VTabhead from '../home/fragment/vtabheadstyletobig/index.vue'
	import study from './study.vue'
	import course from './course'
	//import messageBadgeEvent from '@/mixins/event/messageBadgeEvent';
	export default {
		//mixins:[messageBadgeEvent],
		components: {
			VTabhead,
			study,
			course
		},
		data() {
			return {
				activeIndex: 0,
				headItems: [{
					label: '学习',
					theme: '#4a96f2'
				}, {
					label: '课程',
					theme: '#4a96f2'
				}]
			}
		},
		methods: {
			tabChange(activeIndex) {
				this.activeIndex = activeIndex
			}
		},
		// #ifndef MP
		onNavigationBarSearchInputClicked: async function(e) {
			//this.api.msg('点击了搜索框');
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 2) {
				this.clickMessage();
			}
		},
		// #endif
		onPullDownRefresh() {
			//调用子组件的刷新方法
			if(this.activeIndex==0){
				this.$refs.study.loadData();
			}else if(this.activeIndex==1){
				this.$refs.course.loadData();
			}
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 2) {
				//this.clickMessage();
				uni.navigateTo({
					url: '/pages/message/inMsgList'
				});
			} else if (index === 3) {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.index-container{
		background-color: #fff;
		min-height: calc(100vh - 80upx);
	}
	.homeSwiperContainer {
		width: 100%;
		flex: 1;
		overflow-y: scroll;
		background-color: #fff;
	}
</style>
